<template>
  <div id="menu" class="menu">
    <ul>
      <dl><a class="link" :href="link1" target="_blank">选手查询</a></dl>
      <dl><a class="link" :href="link2" target="_blank">成绩查询</a></dl>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'menu',
  data() {
    return {
    
      matchId: '',
      link1:"",
      link2:""
    }
  },
  created() {
    this.link1 = "/match/player/queryPlayersList"
    this.link2 = "/match/result/queryResult"
  },
  mounted() {},
  methods: {},
}
</script>

<style scoped>
.menu {
  width: 100%;
  height: 100%;
  background: url(~@/assets/menu_bg.jpg) no-repeat;
  background-position: center center;
  background-size: auto 120%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.menu ul {
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  align-items: center;
}
.menu ul dl {
  width: 50%;
  text-align: center;
}
.menu ul dl a {
  font-size: 2rem;
  padding: 15px 25px;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(64, 104, 105);
  border-radius: 30px;
  background-color:cadetblue;
  color:#fff;
}

.menu ul dl:hover a {
  background-color:rgb(76, 175, 178);
  color:#fff;
}
</style>